<template></template>
<script setup>
import { onMounted, onBeforeUnmount, inject } from 'vue';

let animationId;

const { map } = inject('map');

const animateMapRotation = () => {
  if (map) {
    const currentCenter = map.getCenter();
    //mapbox经度范围0-360
    // console.log(currentCenter.lng);
    const newLng = (currentCenter.lng + 0.5) % 360; // 每帧增加0.5度
    //参数为数组[经度，纬度]
    map.setCenter([newLng, currentCenter.lat]); // 更新中心点经度
  }
  animationId = requestAnimationFrame(animateMapRotation); // 继续请求下一帧
};

onMounted(() => {
  animateMapRotation(); // 启动动画
  map.setZoom(1);
});

onBeforeUnmount(() => {
  cancelAnimationFrame(animationId); // 组件卸载时取消动画
});
</script>
